<!DOCTYPE html>
<html lang="zh-CN">

<!-- auxiliary 辅机控制页面 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/iview.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/iview.min.js"></script>
    <script src="./config.js" type="text/javascript"></script>
    <script src="./js/nept-websocket.js" type="text/javascript"></script>
    <link rel="stylesheet" href="./css/notiflix-3.2.5.min.css">
    <script src="./js/notiflix-3.2.5.min.js"></script>

    <title>斗轮机无人值守系统-南环科技</title>

    <style>
        .cardHead {
            height: 30px;
            color: white;
            line-height: 15px;
            font-size: 18px;
            font-weight: 700;
            border-radius: 5px 5px 0px 0px;
        }

        .cardContent1 {
            width: 48%;
            height: 60px;
            font-size: 18px;
            background-color: green;
            color: white;
            float: left;
            border-radius: 5px 5px 5px 5px;
        }

        .cardContent1:hover {
            cursor: pointer;
            font-size: 20px;
            font-weight: 700;
            color: white;
            background-color: #87CEEB;
        }

        .cardContent2 {
            width: 48%;
            height: 60px;
            font-size: 18px;
            background-color: green;
            float: right;
            color: white;
            border-radius: 5px 5px 5px 5px;
        }

        .cardContent2:hover {
            cursor: pointer;
            font-size: 20px;
            font-weight: 700;
            color: white;
            background-color: #87CEEB;
        }
    </style>
</head>

<body style="margin:0px; padding:0px;">
    <div id="app">
        <div id="auxiliarys" style="width: 100%;height: 780px; background-image: url('./projects/assets/file/2025/0725/1/1/background-1.png')">
            <div style="width: 100%;background-color: #CCE8CF;">
                <i-col v-for="(item,i) in auxiliary" class="col" span="4"
                    style="text-align: center;margin-top: 10px;margin-left: 3%;">
                    <card :bordered="false" style="background-color: #3CB371;">
                        <div class="cardHead">{{item.Name}}</div>
                        <div style="height: 60px;width: 100%;line-height: 60px;">
                            <div :id="item.Buttons[0].Id" class="cardContent1 head1" @click="commitCMD(item.Buttons[0].CommandValue.split(',')[0],item.Buttons[0].CommandValue.split(',')[1])">{{item.Buttons[0].ButtonName}}</div>
                            <div :id="item.Buttons[1].Id" class="cardContent2" @click="commitCMD(item.Buttons[0].CommandValue.split(',')[0],item.Buttons[0].CommandValue.split(',')[1])">{{item.Buttons[1].ButtonName}}</div>
                        </div>
                    </card>
                </i-col>
            </div>
        </div>
    </div>

    <script>
        // 更新页面
        function updateViewByHtml(jsData) {
            for (let item of jsData) {
                $("#" + item.I + "").css("background-color", item.C);
            }
        }

        // 接收辅机控制页面数据
        function onReceiveAuxiliaryData(data){
            if ((data != null) && (data != "")){
                let jsData = JSON.parse(data);
                updateViewByHtml(jsData.HTML);
            }
        }

        let auxiliaryControlMessage = "pid=" + g_PageID_Auxiliary;
        let auxiliaryWS = new NeptWebSocket(
            g_CenterServerIp,
            g_CenterWebSocketPort,
            g_WebSocketMaxReconnectInterval,
            onReceiveAuxiliaryData,
            auxiliaryControlMessage
        );
        auxiliaryWS.tryCreate();

        
        let Main = {
            data() {
                return {
                    buttonSize: 'large',
                    auxiliary: []
                }
            },

            methods: {
                // Success(msg) {
                //     this.$Message.success(msg);
                // },

                // Warning(msg) {
                //     this.$Message.warning(msg);
                // },

                // Error(msg) {
                //     this.$Message.error(msg);
                // },

                getAuxiliary() {
                    this.onGetPageRenderedContent('104');
                },
                onGetPageRenderedContent(pageId) {
                    let request = {};
                    request.Function = "GetPageRenderedContent";
                    request.PageId = pageId;
                    this.sendPostMessage(g_CenterHttpUrl, request);
                },
                sendPostMessage(serverUrl, request) {
                    if (serverUrl == null) {
                        return;
                    }
                    if (request == null) {
                        return;
                    }
                    fetch(serverUrl, {
                        method: 'post',
                        body: JSON.stringify(request),
                        headers: { 'Content-Type': 'application/json' }
                    }).then((e) => {
                        e.text().then(data => {
                            let jdata = JSON.parse(data);
                            if(jdata.Code == g_ResCodeSuccess) {
                                this.auxiliary = JSON.parse(jdata.Message);
                            }
                            else {
                                Notiflix.Notify.warning(jdata.Message);
                            }
                        });
                    });
                },
                // 下发命令
                commitCMD(cmd, obj){
                    let request = {};
                    request.Function = "CommitAuxiliary";
                    request.Cmd = cmd;
                    request.Obj = obj;
                    fetch(g_CenterHttpUrl, {
                        method: 'post',
                        body: JSON.stringify(request),
                        headers: { 'Content-Type': 'application/json' }
                    }).then((e) => {
                        e.text().then(data => {
                            let jdata = JSON.parse(data);
                            if(jdata.Code == g_ResCodeSuccess) {
                                Notiflix.Notify.success('成功');
                            }
                            else {
                                Notiflix.Notify.warning(jdata.Message);
                            }
                        });
                    });
                }
            },

            mounted() {
                this.getAuxiliary();
            }
        }


        window.onload = function(){
            let Component = Vue.extend(Main);
            new Component().$mount('#app');
            Notiflix.Notify.init({timeout: g_NotiflixTimeout});
        }

        window.onunload = function(){
            if (auxiliaryWS != null){
                auxiliaryWS.close();
            }
        }
    </script>
</body>

</html>